<template>
  <div class="classify">
    <!-- 搜索栏 -->
    <van-search v-model="searchValue" placeholder="商品搜索 共239万款好物" />
    <!-- 分类选择 -->
    <van-tree-select
      height="calc(100vh - 104px)"
      :items="items"
      :main-active-index.sync="activeIndex"
      @click-nav="changeRight"
    >
        <template slot="content">
          <div class="imgBanner">
            <img width="100%" height="80px" :src="bannerImg" >
          </div>
          <van-grid :column-num="3">
             <van-grid-item v-for="(item,index) in subCategoryList" :key="index" :icon="item.wap_banner_url" :text="item.name" :to="`/categoryList/${item.id}`" />
          </van-grid>
        </template>
    </van-tree-select>
    <!-- 底部 -->
    <tab-bar></tab-bar>
  </div>
</template>
<script>
import TabBar from "@/components/TabBar";
import axios from "axios";
import api from "../assets/config/api";
export default {
  components: {
    TabBar,
  },
  data() {
    return {
      searchValue: "",
      activeIndex: 0,
      data:{},
      subCategoryList:[],
      bannerImg:[]
    //   categoryList: [],
    };
  },
  computed: {
    items() {
        // console.log(this.data.categoryList);
        if (this.data.categoryList == undefined) {
            return []
        } else {
            let arr = [];
            this.data.categoryList.forEach((item,index) => {
                // console.log(item.name);
                item.text = item.name
                arr.push(item)
            });
            // console.log(arr);
            return arr
        }
    }  
  },
  async created() {
    let res = await axios.get(api.CatalogList);
    let data = res.data;
    this.data = data.data;
    this.subCategoryList = this.data.currentCategory.subCategoryList;
    this.bannerImg = this.data.currentCategory.img_url
    // console.log(data);
  },
  methods: {
    changeRight(index) {
      console.log(index);
      this.activeIndex = index
    }
  },
  watch: {
    async activeIndex() {
      if (this.items.length != 0) {
        let id = this.items[this.activeIndex].id;
        let res = await axios.get(api.CatalogCurrent,{params:{id}});
        // console.log(res);
        this.subCategoryList = res.data.data.currentCategory.subCategoryList;
        this.bannerImg = this.items[this.activeIndex].img_url;
        // console.log(this.subCategoryList);
      } else {
        this.subCategoryList = []
      }
    }
  }
};
</script>

<style lang="less">
.imgbanner{
            width: 100%;
            box-sizing: border-box;
            padding: 10px;
        }
        .van-sidebar-item--select {
          color: red !important;
        }
</style>